<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>你好, 雨涵</title>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="sara mazal lessons">
<meta name="keywords" content="HTML, CSS, JavaScript, mazal, icons">
<meta name="author" content="Sara Mazal">
<!--  SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuIQ== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500&family=Raleway:wght@100;200;300;400;500&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<!-- SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuOiBodHRwczovL2NvZGVwZW4uaW8vU2FyYW1hemFsICYgR2l0SHViOiBodHRwczovL2dpdGh1Yi5jb20vc2FyYW1hemFs -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

<!-- 图片div-->
<!-- <link rel="stylesheet" href="./ajax.css">-->
<link rel="stylesheet" href="./style_jiuchu.css">
<!-- 图片div-->
</head>
<body>
<!-- partial:index.partial.html -->
<sectio class="nav">
  <h1>我们的交往</h1>
  <h3 class="span loader"><span class="m">初</span><span class="m">见</span><span class="m">乍</span><span class="m">惊</span><span class="m">欢</span><span class="m">&nbsp;</span><span class="m">久</span><span class="m">处</span><span class="m">亦</span><span class="m">怦</span><span class="m">然</span><span class="m">&nbsp;
  </span><span class="m">愿</span><span class="m">可</span><span class="m">共</span><span class="m">白</span><span class="m">首</span><span class="m">&nbsp;</span><span class="m">余</span><span class="m">生</span><span class="m">常</span><span class="m">相</span><span class="m">伴</span>
  </h3>
  <div class="nav-container"><a class="nav-tab" href="#tab-chujian">初见</a><a class="nav-tab" href="#tab-jinghuan">惊欢</a><a class="nav-tab" href="#tab-jiuchu">久处</a><a class="nav-tab" href="#tab-pengran">怦然</a><a class="nav-tab" href="#tab-keyuan">可愿?</a><span class="nav-tab-slider"></span></div>
</sectio>
<main class="main">
  <section class="slider" id="tab-chujian">
    <h1>初见</h1>
    <h2>another frontend JS framework</h2>
  </section>
  <section class="slider" id="tab-jinghuan">
    <h1>惊欢</h1>
    <h2>an extremely fast JavaScript bundler</h2>
  </section>
  <section class="slider" id="tab-jiuchu">
    <h1>久处</h1>
    <h2>framework for Production</h2>
	<div><img src="./jiuchu1.jpg"></div>
  </section>
  <section class="slider" id="tab-pengran">
    <h1>怦然</h1>
    <h2>giving you better tooling at any scale</h2>
		<!-- 图片div-->
		<main class="page-content">
		  <!--<div class="card">
			<div class="content">
			  <h2 class="title">Mountain View</h2>
			  <p class="copy">Check out all of these gorgeous mountain trips with beautiful views of, you guessed it, the mountains</p>
			  <button class="btn">View Trips</button>
			</div>
		  </div>-->
		  <div class="card">
			<div class="content">
			  <h2 class="title">To The Beach</h2>
			  <p class="copy">Plan your next beach trip with these fabulous destinations</p>
			  <button class="btn">View Trips</button>
			</div>
		  </div>
		  <div class="card">
			<div class="content">
			  <h2 class="title">Desert Destinations</h2>
			  <p class="copy">It's the desert you've always dreamed of</p>
			  <button class="btn">Book Now</button>
			</div>
		  </div>
		  <!--<div class="card">
			<div class="content">
			  <h2 class="title">Explore The Galaxy</h2>
			  <p class="copy">Seriously, straight up, just blast off into outer space today</p>
			  <button class="btn">Book Now</button>
			</div>
		  </div>-->
		</main>
		<!-- 图片div-->
  </section>
  <section class="slider" id="tab-keyuan">
    <!-- <h1>可愿?</h1> -->
	<!-- <h2>可愿共白首？</h2> -->
	<!-- <h2>余生常相伴！</h2> -->
	<h1 class="span loader"><span class="m">可</span><span class="m">愿</span><span class="m">共</span><span class="m">白</span><span class="m">首</span><span class="m">&nbsp;</span>
		<span class="m">余</span><span class="m">生</span><span class="m">“成”</span><span class="m">相</span><span class="m">伴</span>
	</h1>
  </section>
</main>
<canvas class="background"></canvas><!-- SGVsbG8hIE15IG5hbWUgaXMgU2FyYSBNYXphbC4gV2VsY29tZSB0byBteSBDb2RlUGVuIQ== -->
<!-- partial -->
  <!--<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script  src="./script.js"></script> -->
  <script src="./scripthigh.js"></script><script  src="./script.js"></script>

	<!--背景音乐,只能电脑播放-->
  <!--<embed src="./Autumn.mp3" autostart="true" loop="true" hidden="true"></embed>-->
  <!--背景音乐,手机播放,但强制加载,需减小音乐大小-->
  <audio id="bgaudio" loop="loop" preload="auto" autoplay="autoplay">
    <source src="http://sijiacheng.gitee.io/jiangran/Autumn.mp3" type="audio/ogg" />
    <source src="http://sijiacheng.gitee.io/jiangran/Autumn.mp3" type="audio/mp3" />
  </audio>
  <script>
    var bgaudio = document.getElementById('bgaudio');
    function bgmusic(){
      if(bgaudio.paused){
        bgaudio.play();
        $("#bgmusic").addClass("sping");

      }else{
        bgaudio.pause();
        $("#bgmusic").removeClass("sping");
      }
    }

  </script>
  <script>
    var audio=document.querySelector("#bgaudio");
    document.addEventListener("WeixinJSBridgeReady",function(){
      audio.play();
    },false);
  </script>
</body>
</html>
